<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/zcy.userInfo.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/home_testplay.css" />
		<style>
			body {
				background-color: white;
				height: 100%;
			}
			
			.mui-content {
				background-color: #FFFFFF;
				height: 100%;
			}
			
			.user-log {
				margin-top: 15px;
				padding: 5px 5px;
				background-color: #FFFFFF;
				border: 1px solid #CCCCCC;
				border-radius: 8px;
			}
			
			.user-log>div {
				position: relative;
				top: 2px;
			}
			
			.user-log .coins>div {
				display: inline-block;
			}
			
			.user-log .coin-img {
				width: 30px;
				height: 25px;
			}
			
			.user-log .coin-number {
				position: relative;
				top: -5px;
				font-size: 20px;
			}
			
			.user-log .record {
				display: inline-block;
				background-color: #DDDDDD;
				border-radius: 5px;
				margin: 0 2px;
				padding-left: 2px;
			}
			
			.user-log .record .record-img img {
				position: relative;
				top: 2px;
				width: 20px;
				height: 20px;
			}
			
			.user-log .record .record-data {
				position: relative;
				top: 2px;
				height: 22px;
				width: 28px;
				margin-left: 5px;
				font-size: 12px;
			}
			
			.div1 {
				position: absolute;
				z-index: 100;
			}
		</style>
	</head>

	<body>

		<div id="userInfo"></div>
		<div id="play-body" class="mui-content mui-col-xs-11">
			<div class="user-log mui-col-xs-12 mui-row">
				<div class="mui-col-xs-3">
					<div class="coins mui-row">
						<div><img src="images/测试_播放/金币显示框/金币图标.png" alt="" class="coin-img" /></div>

						<div><span class="coin-number"><em id="coinsNum">90</em>枚</span></div>
					</div>
				</div>
				<div class="mui-col-xs-9 mui-row record-box">
					<div class="mui-col-xs-1"></div>
					<div class="mui-col-xs-3 record time mui-row">
						<div class="record-img mui-col-xs-3"><img src="images/测试_播放/金币显示框/播放图标.png" alt="" /></div>
						<div class="record-data mui-col-xs-9"><span><em  id="timeNum">35</em>min</span></div>
					</div>
					<div class="mui-col-xs-3 record lesson mui-row">
						<div class="record-img mui-col-xs-3"><img src="images/测试_播放/金币显示框/课件图标.png" alt="" /></div>
						<div class="record-data mui-col-xs-9"><span><em id="lessonNum">35</em>个</span></div>
					</div>
					<div class="mui-col-xs-3 record ranking mui-row">
						<div class="record-img mui-col-xs-3"><img src="images/测试_播放/金币显示框/排名图标.png" alt="" /></div>
						<div class="record-data mui-col-xs-9"><span>No.<em id="rankNum">99</em></span></div>
					</div>
				</div>
			</div>
		</div>

		<div class="mui-content">
			<div class="mui-row" style="position: relative;margin-top: 2%;">
				<div class="mui-slider div1" style="height: 100%;width: 76.8%;left: 19%;">
					<!--支持滚动的月历-->
					<div class="mui-slider-group mui-slider-loop" style="height: 100%;">
						<div class="mui-slider-item mui-slider-item-duplicate" style="height: 100%;">
							<table class="calendarTable2"></table>
						</div>
						<div class="mui-slider-item" style="height: 100%;">
							<table class="calendarTable0"></table>
						</div>
						<div class="mui-slider-item" style="height: 100%;">
							<table class="calendarTable1"></table>
						</div>
						<div class="mui-slider-item" style="height: 100%;">
							<table class="calendarTable2"></table>
						</div>
						<div class="mui-slider-item mui-slider-item-duplicate" style="height: 100%;">
							<table class="calendarTable0"></table>
						</div>
					</div>
				</div>

				<img src="images/测试_播放/日历/日历背景-月P.png" class="mui-col-sm-12 mui-col-xs-12" style="width: 92%; left:4%" />
				<!--用来显示 2017/08 的label-->
				<label id="nowYearMouth" class="div1" style="left: 20%;top:4%;height:6vw;line-height:6vw;font-size: 6vw;color: #F3F3F3;"></label>
				<label id="todayWeekDay" class="div1" style="left: 5%;top:9%;height:4vw;line-height:4vw;font-size: 4vw;color: pink;">星期一</label>
				<label id="todayDate" class="div1" style="left: 5%;top:18%;height:12vw;line-height:12vw;font-size: 12vw;color: black;">31</label>
			</div>
			<div class="mui-row" style="position: relative;margin-top: 2%">

				<img src="images/测试_播放/菜单/内容.png" class="mui-col-sm-12 mui-col-xs-12" style="width: 92%; left:4%" />
				<div id="dayTimeDiv"> </div>
				<label id="" class=" LessonMsg div1">初高中&nbsp;&nbsp;&nbsp;新概念&nbsp;&nbsp;&nbsp;第二册</label>
				<label id="studyTypeSentence" class=" LessonMsg div1 studyTypeSelected" style="margin-left:55%;">句子</label>
				<label id="studyTypeWord" class="LessonMsg div1 stu" style="margin-left:65%;">单词</label>
				<div id="lessonContentsDiv" class="mui-row" style="position: absolute;overflow:auto;margin-top: 13%;left: 19%; width:77%; height:55%;border:1px solid #F00">
				</div>
				<img id="imgBtn1" style="position: absolute;width:35%; left:19%;top:78%" />
				<img id="imgBtn2" style="position: absolute;width: 35%; left:59%;top:78%" />
			</div>

		</div>

		</div>

		<!--<div id="testplay_curriculum">
			<a>大小排序</a>
			<a>日期排序</a>
			<label>内容分类</label>
			<img src="images/测试_播放/内容显示/修改时间图标.png" />
			<img src="images/测试_播放/金币显示框/图标下的灰色背景.png" />
			<a>初高中</a>
			<a>新概念</a>
			<a>第二册</a>
			<a>句子</a>
			<a>单词</a>
			<img src="images/测试_播放/内容显示/默认提示图标.png" />
			<a>新建</a>
			<a>测试</a>
			<a>播放</a>
			<a>菜单</a>
		</div>-->
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/zcy.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/home_testplay.js"></script>
		<script src="js/audioplayer.js"></script>
		<script type="text/javascript">
			var nowYearMouthObj = $("#nowYearMouth");
			var todayWeekDayObj = $("#todayWeekDay");
			var todayDateObj = $("#todayDate");
			var nowDateObj = new Date();
			mui.init()

			$(function() {
				//显示用户信息，金币数等
				showUserInfo2();
				initCalendarTable();
				initImgBtn();
				initStudyTypeBtn();
			})
		</script>
	</body>

</html>